<template>
    <div class="box">
        <h3>路由参数</h3>
        <p>1.查询参数</p>
        <pre>
        vue路由模块提供的RouterLink组件，依然可以继续使用http协议的查询参数功能;
            + 在to属性取值的路径后面，以关键字 ? 描述后续部分的查询参数
            + 查询参数由 key=value&key=value&…… 格式定义，key为参数名，value 为参数值，&连接多个参数

        方式一：【选项式规则】
            vue路由通过地址方式定义查询参数，在路由切换过程中，会被记录在 激活路由信息对象中【 $route 】;
            以http协议描述的 ? 参数，将被记录在 $route.query 对象中；

        方式二：【组合式规则】
            vue路由模块提供专用的组合式API 信息对象加载方法 useRoute ，通过该方法可以在组合式语法中直接获取信息对象；
            该信息对就是 vue路由加载的全局 激活信息对象 $route；
            通过加载的 信息对象中的 query 属性可以获取参数
                import { useRoute } from "vue-router";
                const $route = useRoute();
                function showQuery() {
                    alert($route.query.argA + ":" + $route.query.argB)
                }
                console.log($route.query)
        </pre>
        <p>2.rest路径参数【动态路径参数】</p>
        <pre>
        vue路由模块提供的RouterLink组件，依据与路由组件 path 定义规则，在路径上隐藏参数取值；
        需要路由路径定义时提供相关支持，path取值  { path:"/路径/:参数名" } 或者 { path:"路径/:参数名" }
        例如
            请求地址  /detail   
            携带参数  filmId=234567   
                    aa=1234

            rest:  /detail/234567/1234    { path:"/detail/:filmId/:aa" }
                或  /234567/detail/1234    { path:"/:filmId/detail/:aa" }
                或  /1234/detail/234567    { path:"/:aa/detail/:filmId" }

        rest 参数在vue路由组件 路径定义过程中 可以通过 ? 关键字描述路径参数是否为可选参数;
        例如：path:a/:b/:c?
                a 为路径
                b 为必传参数
                c 为可选参数

        方式一：【选项式规则】
            vue路由通过地址方式定义查询参数，在路由切换过程中，会被记录在 激活路由信息对象中【 $route 】;
            rset参数将被记录在 $route.params 对象中；

        方式二：【组合式规则】
            vue路由模块提供专用的组合式API 信息对象加载方法 useRoute ，通过该方法可以在组合式语法中直接获取信息对象；
            该信息对就是 vue路由加载的全局 激活信息对象 $route；
            通过加载的 信息对象中的 query 属性可以获取参数
                import { useRoute } from "vue-router";
                const $route = useRoute();
                function showQuery() {
                    alert($route.params.argA + ":" + $route.params.argB)
                }
                console.log($route.params)
        </pre>
        <hr>
        <h3>RouterLink 的 to 属性取值</h3>
        <pre>
        router-link的to属性取值分为两种取值模式：
            String
                查询参数 : 传统的 string路径定义方式 to="路径?参数名=参数值&参数名=参数值……"
                路径参数 ： to=" ……路径/参数…… "
            Object
                查询参数 ：to=" { path:'组件的路径地址'， query:{ key:value,key:value } } "
                查询参数 ：to=" { name:'路由组件的别名'， query:{ key:value,key:value } } "
                        ** 具名路由导航，需要路由配置提供路由名称支持
                            {
                                path: "query",
                                name: "query"
                            }
                路径参数 : to=" { name:'路由组件的别名'， params:{ key:value,key:value } } "
        </pre>

        <div>
            <label>参数1</label>
            <input type="text" v-model="argA">
        </div>
        <div>
            <label>参数2</label>
            <input type="text" v-model="argB">
        </div>

        <hr>
        <h4>查询参数导航</h4>
        <div>静态参数定义</div>
        <RouterLink to="/router/params/query?argA=参数A-1&argB=参数B-1">QueryPage-?argA=参数A-1&argB=参数B-1</RouterLink>
        <br>
        <RouterLink to="/router/params/query?argA=参数A-2&argB=参数B-2">QueryPage-?argA=参数A-2&argB=参数B-2</RouterLink>
        <br>
        <div>动态参数定义</div>
        <RouterLink :to=" `/router/params/query?argA=${argA}&argB=${argB}` ">QueryPage-?{{ `argA=${argA}&argB=${argB}` }}</RouterLink>
        <br>
        <RouterLink 
            :to=" { 
                path:'/router/params/query',
                query:{
                    argA:argA,
                    argB:argB
                }
             } "
        >QueryPage-?{{ `argA=${argA}&argB=${argB}` }}</RouterLink>
        <br>
        <div>具名路由定义和具名路由动态参数定义</div>
        <RouterLink 
            :to=" { 
                name:'query',
                query:{
                    argA:argA,
                    argB:argB
                }
             } "
        >QueryPage-?{{ `argA=${argA}&argB=${argB}` }}</RouterLink>
        
        <hr>
        <h4>rest参数导航</h4>
        <RouterLink to="/router/params/params/参数A">ParamsPage-参数A</RouterLink>
        <br>
        <RouterLink to="/router/params/params/参数B">ParamsPage-参数B</RouterLink>
        <br>
        <RouterLink to="/router/params/params/参数C/参数D">ParamsPage-参数C/参数D</RouterLink>
        <br>
        <div>rest动态参数定义</div>
        <RouterLink :to=" `/router/params/params/${argA}` ">ParamsPage-{{ argA }}</RouterLink>
        <br>
        <RouterLink :to=" `/router/params/params/${argA}/${argB}` ">ParamsPage-{{ argA }}-{{ argB }}</RouterLink>
        <br>
        <div>具名路由定义和具名路由动态参数定义</div>
        <RouterLink 
            :to=" {
                name:'params',
                params:{
                    argA:argA
                }
            } "
        >ParamsPage-{{ argA }}</RouterLink>
        <br>
        <RouterLink 
            :to=" {
                // path:'/router/params/params',
                name:'params',
                params:{
                    argA:argA,
                    argB:argB
                }
            } "
        >ParamsPage-{{ argA }}-{{ argB }}</RouterLink>
        <hr>
        <RouterView></RouterView>
        <hr>
    </div>
</template>

<script setup>
import { ref } from 'vue';

let argA = ref("argA");
let argB = ref("argB");

</script>

<style lang="scss" scoped>

</style>